<template>
  <div>
    <div class="banner" @click="handleBannerClick">
        <img clss="banner-img" :src=" bannerImg" >
        <div class="banner-info">
            <div class="banner-title">{{this.sightName}}</div>
            <div class="banner-number"><span class="iconfont banner-icon">&#xe64a;</span>{{this.bannerImgs.length}}</div>
        </div>
    </div>
    <fade-animation >
        <common-gallary :imgs="bannerImgs" v-show="showGallary"
        @close="handleGalleryClose">
    </common-gallary>
     </fade-animation >
   </div> 
  
</template>

<script>
import CommonGallary from "../../common/gallary/Gallary"
import FadeAnimation from "../../common/fade/FadeAnimation"
    export default {
        name:"Detail",
        props:{
            sightName:String,
            bannerImg:String,
            bannerImgs:Array
        },
        data() {
            return{
                showGallary:false
            }
        },
        methods:{
            handleBannerClick(){
                this.showGallary=true;
                //console.log(this.$route)
            },
            handleGalleryClose(){
                this.showGallary=false;
            }
        },
        components:{
           CommonGallary ,
           FadeAnimation
        }
    };
</script>

<style lang="stylus" scoped>
    .banner
        position:relative
        overflow: hidden
        height:0
        padding-bottom:55%
        background :red
    .banner-img 
        width:100%
    .banner-info
        display:flex
        position:absolute
        left:0
        right:0
        bottom :0
        line-height :.6rem
        color:#fff
        background-image:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.8))
     .banner-title
        font-size:.32rem
        padding:0 .2rem
        flex:1
     .banner-number
        margin-top:.14rem
        padding:0 .4rem
        height:.32rem
        line-height:.32rem
        border-radius: 0.2rem
        background:rgba(0,0,0,.8)
        font-size:.24rem
        .banner-icon
            font-size:.24rem


</style>
